<template>
  <el-alert
    type="warning"
    :closable="false"
  >
    <p v-if="!isLimited && dataType == 'DATE'">
      该项的内容为
      <strong>日期</strong>，请输入如2020-01-01的格式。
    </p>
    <p v-if="!isLimited && dataType == 'NUMBER'">
      该项的内容为 <strong>数字</strong>，请勿输入其他字符。
    </p>
    <p v-if="!isLimited && dataType == 'TEXT'">
      该项的内容为 <strong>文本</strong>，请勿多于255个字符。
    </p>
    <p v-if="isLimited">
      该项为 <strong>固定内容</strong>，请在下拉菜单中选择。
    </p>
    <p v-if="needVerify && !adminLevel">
      该项修改后需
      <strong>经过审核</strong>
      才会生效。
    </p>
    <p v-if="needVerify && !adminLevel">
      该审核仅对进行校验，请确保
      <strong>信息内容</strong>
      正确无误。
    </p>
  </el-alert>
</template>

<script>
export default {
  name: "infoBox",
  props: {
    dataID: {
      type: Number,
      required: true,
    },
  },
  data() {
    return { valueNew: "" };
  },
  computed: {
    configList() {
      return this.$store.state.dataConfig;
    },
    dataConfig() {
      return this.configList[this.dataID];
    },
    dataType() {
      return this.dataConfig.type;
    },
    isLimited() {
      return this.dataConfig.is_limited;
    },
    needVerify() {
      return this.dataConfig.need_verify;
    },
    adminLevel() {
      return this.$store.state.securityData.adminPIMS == 1;
    },
  },
  methods: {
    setValue() {
      this.$emit("setValue", this.valueNew);
    },
  },
  mounted() {
    if (this.valueOld) this.valueNew = this.valueOld;
  },
};
</script>

<style scoped>
.alert {
  padding: 0.45em 1em;
}
</style>